{extend name="common/layoutUser" /}

{block name="body"}
<div class="user-modular-collect">
    <div class="user-modular-title">收藏管理</div>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">文章</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <script type="text/html" id="table-aImage">
                    <div class="table-image-wrap">
                        <img src="{{ d.image }}" alt="img" class="">
                    </div>
                </script>
                <script type="text/html" id="table-aTitle">
                    <a href="{:route('article/detail')}?id={{ d.article_id }}" target="_blank">{{ d.title }}</a>
                </script>
                <table id="wait-table-article" lay-filter="wait-table-article"></table>
            </div>
        </div>
        <script type="text/html" id="table-operate">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                <i class="layui-icon layui-icon-delete" lay-tips="删除"></i>
            </button>
        </script>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(function() {
        let articleTable = waitUtil.table({
            elem: '#wait-table-article'
            ,url: "{:route('user/collect')}"
            ,toolbar: false
            ,limit: 12
            ,cols: [[
                {field:'title', title:'封面', width:60, align:'center', templet:'#table-aImage'},
                {field:'title', title:'文章标题', templet:'#table-aTitle'},
                {field:'browse', title:'阅读量', width:90, align:'center'},
                {field:'browse', title:'收藏量', width:90, align:'center'},
                {field:'create_time', title:'收藏时间', width:170, align:'center'},
                {fixed:'right', title:'操作', width:60, align:'center', toolbar:'#table-operate'}
            ]]
        });

        layui.table.on('tool(wait-table-article)', function(obj) {
            layer.confirm('确定要删除此项收藏吗？', function(index) {
                layer.close(index);
                waitUtil.ajax({
                    url: "{:route('article/collect')}",
                    type: 'POST',
                    data: {id: obj.data['article_id']}
                }).then((res) => {
                    if (res.code === 0) {
                        articleTable.reload();
                    }
                });
            });
        });
    });
</script>
{/block}
